<template>
  <div id="left-container">
    <div class="leftContainer">
      <!-- <dv-border-box-10> -->
      <div class="leftContainer_top">
        <div class="leftContainer_top_title">
          <div class="borderBg">
            <div class="title">
              多跨场景一本账项目五大领域比例
            </div>
            <div class="title_body">
              <VEcharts
                ref="chartClass"
                autoresize
                :options="topConfig"
                class="chartClass"
                style="width:100%;height:100%"
              />
            </div>
          </div>
        </div>

      </div>
      <div class="leftContainer_second">
        <div class="leftContainer_top_title">
          <div class="borderBg">
            <div class="title">
              最佳应用项目五大领域比例
            </div>
            <div class="title_body">
              <VEcharts
                ref="chartClass"
                autoresize
                :options="topConfig"
                class="chartClass"
                style="width:100%;height:100%"
              />
            </div>
          </div>
        </div>

      </div>
      <div class="leftContainer_second">
        <div class="leftContainer_top_title">
          <div class="borderBg">
            <div class="title">
              上线应用项目五大领域比例
            </div>
            <div class="title_body">
              <VEcharts
                ref="chartClass"
                autoresize
                :options="topConfig"
                class="chartClass"
                style="width:100%;height:100%"
              />
            </div>
          </div>
        </div>
        <div style="margin-top:10px" class="leftContainer_second_body">
          <div style="height:calc(36vh - 100px )">
            <table>
              <tr>
                <td :colspan="3" style="padding:0px;background: black;height:30px">
                  <div style="display:flex;">
                    <div style="flex:2">
                      <span class="circle" />
                      <span style="color:#23b6cd;">
                        年度信息化项目概述
                      </span>
                    </div>
                    <div style="flex:1;text-align:right;padding-right:10px">
                      <img style="width:25px" src="../../../assets/images/mapTest1/middleBg2.svg">
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>类型</td>
                <td>年度项目
                  <br>数量</td>
                <td>年度项目
                  <br>资金</td>
              </tr>
              <tr>
                <td>申报</td>
                <td>462个</td>
                <td>3.4亿</td>
              </tr>
              <tr>
                <td>核准</td>
                <td>298个</td>
                <td>2.9亿</td>
              </tr>

            </table>
          </div>
          <!-- <scrollBoard :config="config1" /> -->
        </div>
      </div>
      <!-- </dv-border-box-10> -->

    </div>
  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';

var data = [{
  'name': '数字政府',
  'value': 20
}, {
  'name': '数字经济',
  'value': 30
}, {
  'name': '数字智治',
  'value': 40
}, {
  'name': '数字社会',
  'value': 50
}, {
  'name': '数字法制',
  'value': 60
}];
export default {
  components: {
    VEcharts
  },
  data() {
    return {
      topConfig: {
        color: ['#cc3a3b', '#115f6d', '#178d9e', '#20bbce', '#28e6ff'],
        legend: {
          orient: 'vertical',
          top: 'top',
          right: '5%',
          itemHeight: 5, // 修改icon图形大小
          textStyle: {
            color: '#f2f2f2',
            fontSize: 8

          },
          data: data
        },
        series: [
          {
            name: '数据',
            type: 'pie',
            radius: '92%',
            center: ['40%', '50%'],
            labelLine: {
              normal: {
                length: 5
              }
            },
            data: data.sort(function(a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                formatter: '{d}%',
                textStyle: {
                  fontSize: 12
                },
                position: 'inner'
              },
              emphasis: {
                show: true
              }
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]

      }

    };
  },
  computed: {
  }

};
</script>
<style lang='scss' scoped>
   .leftContainer{
    height: calc(100vh - 70px);
    border-radius: 10px;
   }
    td {
      border: 1px solid #22c0d6;
text-align: center;
      height: calc(6vh);
      line-height: 18px;
      padding: 10px;
      width: 100px;
      color: #ced1da;
      font-weight: bolder;
      font-size:15px;
      font-weight: bolder
    }

    table {
        border-collapse: collapse;
    }

   .title{
     height: 33px;
     padding-top: 10px;
     font-size: 0.6rem;
     padding-left: 8px;
     background: url('../../../assets/images/mapTest1/borderBg.svg') no-repeat;
     background-size:100% 100%;
     color: #ced1da;
   }
   .title_body{
     height:calc(17vh);
     border: 2px solid #0c284f;
     border-top:none;
     border-bottom-right-radius:5px;
     border-bottom-left-radius:5px;
   }

   .leftContainer_top_title{
     font-size: 17px;
     font-weight: bolder;
   }
  .leftContainer /deep/ .dv-border-box-10 .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
  }

  .leftContainer_second{
    margin-top: 8px
  }
  .leftContainer_top_body_div{
    flex:1;
    text-align:center;
    border-right: 1px solid #ffffff94;
    height: 100%;

  }
   .leftContainer_top_body_div1{
     flex:1;
     text-align:center;
     height: 100%;

  }
  .num{
    font-size: 24px;
    font-weight: bolder;
  }
  .name{
    font-size: 8px;
    color: gray
  }
  .circle{
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border:1px solid #23b6cd;
    border-radius: 50%;
  }

</style>
